<template>
  <div class="about" ref="sddd">
    <h1>This is an about page</h1>
    <p>{{ state }}</p>
  </div>
  <button @click="state++">点我+1</button>
  <hr>
  <h1>姓名:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <h1>薪资:{{ person.job.job1 }}</h1>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.job1 ++">修改薪资</button>

</template>
<script setup lang="ts">
import {reactive,ref,watchEffect } from 'vue';

 let state=ref(0);
 let person=reactive({
  name:'zs',
  age:12,
  job:{
    job1:14
  }
 })
// 总结：
// 立即执行 想当于 watch 的立即监听
// 和computed功能类似
// computed 需要有返回值，注重计算出来的值
// watchEffect 不需要返回值，注重过程


 watchEffect(()=>{
 console.log('我这及触发了')
 const res=state.value
 const res2=person.job.job1
 })
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
